<script setup>
import FullScreen from "./FullScreen.vue";
import VIcon from "./VIcon.vue";
import VProfile from "./VProfile.vue";
import VBreadCrumb from "./VBreadCrumb.vue";
import store from "../../store/index.js";

// 定义事件
const emits = defineEmits(["refresh"]);

const refresh = () => {
  // 通知父组件，刷新页面
  emits("refresh");
};
// 折叠/展开侧边栏
const collapseSidebar = () => {
  // 使用 store 更新侧边栏的折叠状态
  store.dispatch("sidebar/updateSidebarCollapsed");
};
</script>

<template>
  <div class="v-header-container">
    <v-icon icon="Operation" @click="collapseSidebar"/>
    <v-icon icon="Refresh" margin-left="10px" rotate @click="refresh"/>
    <v-bread-crumb/>
    <div class="header-right">
      <full-screen/>
      <v-profile/>
    </div>
  </div>
</template>

<style scoped>
.v-header-container {
  height: 100%;
  display: flex;
  align-items: center;

  .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
  }
}
</style>